<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表单验证实验</title>
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script>
			function CheckSid(){
				//取得学号
				sidvalue = document.getElementById("studentid").value;
				regExp= /^[0-9]{9}$/;   //正则表达式
				if (!regExp.test(sidvalue)){
					alert("学号格式不对！");
					return false;
				}
				else{
					return true;
				}
			}
			function CheckSname(){
				sname =document.getElementById("sname").value;
				regExp =/^[\u4E00-\u9FA5]{2,4}$/; //汉字的正则表达式
				if (!regExp.test(sname)){
					document.getElementById("snametip").innerHTML="姓名不合法！";
					document.getElementById("snametip").style="color:red;font-size:50%";
					return false;
				}
				else {
					document.getElementById("snametip").innerHTML=" ";
					return true;
				}
			}
			function CheckMobile(){
				mobile =document.getElementById("mobile").value;
				// regExp= /^[1][3,4,5,7,8][0-9]{9}$/;
				 regExp=/^1[0-9]{10}$/;
				if (!regExp.test(mobile)){
					document.getElementById("mobiletip").innerHTML="手机号不合法！";
					document.getElementById("mobiletip").style="color:red;font-size:50%";
					return false;
				}
				else {
					document.getElementById("mobiletip").innerHTML=" ";
					return true;
				}
			}
			function CheckSalary(){
				salary =document.getElementById("salary").value;
				 regExp=/^[0-9]{5}$/;
				if (!regExp.test(salary)){
					document.getElementById("salarytip").innerHTML="薪资不合法！";
					document.getElementById("salarytip").style="color:red;font-size:50%";
					return false;
				}
				else {
					document.getElementById("salarytip").innerHTML=" ";
					return true;
				}
			}
		</script>
	</head>
	<body>
		<div class="center-block" style="width: 50%;">
			学号<input onblur="CheckSid()" class="form-control" type="text" id="studentid"><br>
			姓名<input onblur="CheckSname()" class="form-control" type="text" id="sname"><span id="snametip"></span> <br>
			手机<input onblur="CheckMobile()" class="form-control" type="text" id="mobile"><span id="mobiletip"></span><br>
			薪资<input onblur="CheckSalary()" class="form-control" type="text" id="salary"><span id="salarytip"></span><br>
			<button class="btn btn-primary btn-block">添加学生</button>
		</div>
		
	</body>
</html>
